---
title: Düğmeler
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

Uygulamada kullanılan düğme ve düğme gruplarının bir listesi.

## Düğme

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Özellikler    | Tür                   | Açıklama                                                                                                                             |
| ------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| sınıfAdı      | metin                 | Ek stil için isteğe bağlı sınıf adı                                                                                                  |
| Simge         | `React.ComponentType` | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni                                                                            |
| başlık        | metin                 | Düğmenin metin içeriği                                                                                                               |
| tamGenişlik   | boolean               | Düğmenin konteynerinin tüm genişliğini kaplayıp kaplamayacağını tanımlar                                                             |
| variant       | metin                 | Düğmenin görsel stil varyantı. Seçenekler `primary`, `secondary` ve `tertiary` içerir                                |
| boyut         | metin                 | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta`                                               |
| pozisyon      | metin                 | Düğmenin, kardeşlerine göre konumu. Seçenekler şunları içerir: `tek başına`, `sol`, `sağ`, ve `orta` |
| vurgula       | metin                 | Düğmenin vurgu rengi. Seçenekler şunları içerir: `varsayılan`, `mavi`, ve `tehlike`                  |
| yakında       | boolean               | Düğmenin "yakında" (örneğin gelecek özellikler için) olarak işaretlenip işaretlenmediğini belirtir                |
| devre dışı    | boolean               | Düğmenin devre dışı olup olmadığını belirtir                                                                                         |
| odak          | boolean               | Düğmenin odaklanmış olup olmadığını belirler                                                                                         |
| tıklandığında | fonksiyon             | Kullanıcı düğmeye tıkladığında tetiklenen bir geri çağırma fonksiyonu                                                                |

</Tab>

</Tabs>

## Düğme Grubu

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| Özellikler            | Tür                   | Açıklama                                                                                                                          |
| --------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| sınıfAdı              | metin                 | Ek stil için isteğe bağlı ad                                                                                                      |
| Simge                 | `React.ComponentType` | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni                                                                         |
| başlık                | metin                 | Düğmenin metin içeriği                                                                                                            |
| boyut                 | metin                 | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta`                                            |
| pozisyon              | metin                 | Düğmenin, kardeşlerine göre konumu. Seçenekler şunları içerir: `tek başına`, `sol`, `orta`, `sağ` |
| gölgeUygula           | boolean               | Bir düğmeye gölge uygulayıp uygulamamayı belirler                                                                                 |
| bulanıklaştırmaUygula | boolean               | Düğmeye bulanıklaştırma efekti uygulayıp uygulamamayı belirler                                                                    |
| devre dışı            | boolean               | Düğmenin devre dışı olup olmadığını belirler                                                                                      |
| odak                  | boolean               | Düğmenin odakta olup olmadığını belirtir                                                                                          |

</Tab>
</Tabs>

## Yüzer Düğme Grubu

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| Özellikler | Tür       | Açıklama                                                                               | Varsayılan |
| ---------- | --------- | -------------------------------------------------------------------------------------- | ---------- |
| boyut      | metin     | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta` | küçük      |
| çocuklar   | ReactNode | Grup içindeki bireysel düğmeleri temsil eden bir dizi React elemanı                    |            |

</Tab>

</Tabs>

## Yüzer Simge Düğmesi

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Özellikler            | Tür                   | Açıklama                                                                                                                             |
| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| sınıfAdı              | metin                 | Ek stil için isteğe bağlı ad                                                                                                         |
| Simge                 | `React.ComponentType` | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni                                                                            |
| boyut                 | metin                 | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta`                                               |
| pozisyon              | metin                 | Düğmenin, kardeşlerine göre konumu. Seçenekler şunları içerir: `tek başına`, `sol`, `sağ`, ve `orta` |
| gölgeUygula           | boolean               | Bir düğmeye gölge uygulayıp uygulamamayı belirler                                                                                    |
| bulanıklaştırmaUygula | boolean               | Düğmeye bulanıklaştırma efekti uygulayıp uygulamamayı belirler                                                                       |
| devre dışı            | boolean               | Düğmenin devre dışı olup olmadığını belirler                                                                                         |
| odak                  | boolean               | Düğmenin odakta olup olmadığını belirtir                                                                                             |
| tıklandığında         | fonksiyon             | Kullanıcı düğmeye tıkladığında tetiklenen bir geri çağırma fonksiyonu                                                                |
| etkin                 | boolean               | Düğmenin etkin durumda olup olmadığını belirler                                                                                      |

</Tab>

</Tabs>

## Yüzer Simge Düğme Grubu

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| Özellikler    | Tür   | Açıklama                                                                                                                                                                                                                                                                                 |
| ------------- | ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| sınıfAdı      | metin | Ek stil için isteğe bağlı ad                                                                                                                                                                                                                                                             |
| boyut         | metin | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta`                                                                                                                                                                                                   |
| simgeDüğmeler | dizi  | Her biri gruptaki bir simge düğmesini temsil eden nesnelerin bir dizisi. Her bir nesne, düğmede görüntülemek istediğiniz simge bileşenini, kullanıcı düğmeye tıkladığında çağırmak istediğiniz fonksiyonu ve düğmenin etkin olup olmadığını içermelidir. |

</Tab>

</Tabs>

## Işık Düğmesi

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| Özellikler    | Tür               | Açıklama                                                                                          |
| ------------- | ----------------- | ------------------------------------------------------------------------------------------------- |
| sınıfAdı      | metin             | Ek stil için isteğe bağlı ad                                                                      |
| simge         | `React.ReactNode` | Düğmede görüntülemek istediğiniz simge                                                            |
| başlık        | metin             | Düğmenin metin içeriği                                                                            |
| vurgula       | metin             | Düğmenin vurgu rengi. Options include: `secondary` and `tertiary` |
| aktif         | boolean           | Düğmenin etkin durumda olup olmadığını belirler                                                   |
| devre dışı    | boolean           | Düğmenin devre dışı olup olmadığını belirler                                                      |
| odak          | boolean           | Düğmenin odakta olup olmadığını belirtir                                                          |
| tıklandığında | fonksiyon         | Kullanıcı düğmeye tıkladığında tetiklenen bir geri çağırma fonksiyonu                             |

</Tab>

</Tabs>

## Işık Simge Düğmesi

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Özellikler    | Tür                   | Açıklama                                                                                          |
| ------------- | --------------------- | ------------------------------------------------------------------------------------------------- |
| sınıfAdı      | metin                 | Ek stil için isteğe bağlı ad                                                                      |
| testId        | metin                 | Düğme için test tanımlayıcısı                                                                     |
| Simge         | `React.ComponentType` | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni                                         |
| başlık        | metin                 | Düğmenin metin içeriği                                                                            |
| boyut         | metin                 | Düğmenin boyutu. İki seçenek vardır: `küçük` ve `orta`            |
| vurgula       | metin                 | Düğmenin vurgu rengi. Options include: `secondary` and `tertiary` |
| aktif         | boolean               | Düğmenin etkin durumda olup olmadığını belirler                                                   |
| devre dışı    | boolean               | Düğmenin devre dışı olup olmadığını belirler                                                      |
| odak          | boolean               | Düğmenin odakta olup olmadığını belirtir                                                          |
| tıklandığında | fonksiyon             | Kullanıcı düğmeye tıkladığında tetiklenen bir geri çağırma fonksiyonu                             |

</Tab>

</Tabs>

## Ana Düğme

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Özellikler                | Tür                              | Açıklama                                                                                                              |
| ------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| başlık                    | metin                            | Düğmenin metin içeriği                                                                                                |
| tamGenişlik               | boolean                          | Düğmenin konteynerinin tüm genişliğini kaplayıp kaplamayacağını tanımlar                                              |
| variant                   | metin                            | Düğmenin görsel stil varyantı. Options include `primary` and `secondary`                              |
| yakında                   | boolean                          | Düğmenin "yakında" (örneğin gelecek özellikler için) olarak işaretlenip işaretlenmediğini belirtir |
| Simge                     | `React.ComponentType`            | Düğme içinde görüntülenen isteğe bağlı bir simge bileşeni                                                             |
| React `düğme` özellikleri | `React.ComponentProps<'button'>` | Tüm standart HTML düğme özellikleri desteklenir                                                                       |

</Tab>

</Tabs>

## Yuvarlak Simge Düğmesi

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Özellikler                | Tür                                             | Açıklama |
| ------------------------- | ----------------------------------------------- | -------- |
| Simge                     | `React.ComponentType`                           |          |
| React `düğme` özellikleri | `React.ButtonHTMLAttributes<HTMLButtonElement>` |          |

</Tab>

</Tabs>
